<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" :oktext="$ti18('rxForm.saveBtn', '保存')">
        <div  class="CustomPageTemplateEdit-head">
            <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <div class="CustomPageTemplateEdit-head-modle">
                    <a-form-model-item :label="$ti18('rxForm.name','名称')" prop="name" >
                        <a-input :placeholder="$ti18('rxForm.name','名称','','input')" v-model="mdl.name"/>
                    </a-form-model-item>
                    <a-form-model-item :label="$ti18('rxForm.rxAlias','别名')" prop="alias" class="x-a-form-model-error">
                        <a-input :placeholder="$ti18('rxForm.rxAlias','别名','','input')" v-model="mdl.alias"/>
                    </a-form-model-item>
                </div>
            </a-form-model>
        </div>
        <div class="CustomPageTemplateEdit-common">
            <div class="CustomPageTemplateEdit-common-left">
                <custom-page-design
                    changePageName="CustomPageColumnEdit"
                    ref="pageDesign"
                    :changePage="changePage"
                    @setType="setType"
                    @runChange="onChange"
                    @pageTemplate="getPageTemplate"/>
            </div>
            <div class="CustomPageTemplateEdit-common-right">
                <custom-page-show :type="type" ref="customPageShow"></custom-page-show>
            </div>
        </div>
    </rx-dialog>
</template>
<script>
import CustomPageColumnApi from '@/api/portal/core/customPageColumn'
import {RxDialog, BaseFormModel, Util} from "@lowcode/jpaas-common-lib";
import userState from "@/assets/js/userState";
import CustomPageDesign from "./customPage/CustomPageDesign"
import CustomPageShow from "./CustomPageShow"
import CustomPageTemplateDialog from "@/views/modules/portal/core/CustomPageTemplateDialog";
import CustomPageTemplateApi from "@/api/portal/core/customPageTemplate";

export default {
    name: 'CustomPageColumnEdit',
    mixins: [BaseFormModel,userState],
    components: {
        RxDialog,
        CustomPageDesign,
        CustomPageShow
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            rules: {
                alias: [
                    {required: true, message: this.$ti18('rxForm.rxAlias','别名','','input'), trigger: 'change'},
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n2('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                createByName: [{required: false, message: this.i18n('form.creatorName','创建人名称','input'), trigger: 'change'}],
                cssStyle: [{required: false, message: this.i18n('form.CSSStyles','CSS样式','input'), trigger: 'change'}],
                javascript: [{required: false, message: this.$ti18('rxDecorator.input','请输入JS') + 'JS', trigger: 'change'}],
                name: [{required: true, message: this.i18n('form.columnName','栏目名称','input'), trigger: 'change'}],
                template: [{required: false, message: this.$ti18('rxDecorator.input','请输入HTML') + 'HTML', trigger: 'change'}]
            },
            //mobile pc
            type:"pc"
        }

    },
    mounted() {
        this.onChange();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "customPageColumn", key);
        },
        i18n2(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        onload_(values){
            //数据初始化
            if(values){
                this.$refs.pageDesign.setData({
                    template:values.template,
                    mobileTemplate:values.mobileTemplate,
                    jsScript:values.javascript,
                    cssStyle:values.cssStyle,
                })
            }
        },
        get(id) {
            return CustomPageColumnApi.get(id);
        },
        save() {
            var obj = this.$refs.pageDesign.getData();
            this.$set(this.mdl,"template",obj.template);
            this.$set(this.mdl,"mobileTemplate",obj.mobileTemplate);
            this.$set(this.mdl,"javascript",obj.jsScript);
            this.$set(this.mdl,"cssStyle",obj.cssStyle);
            //是否为默认
            this.$set(this.mdl,"isDefault","1");
            if(!this.mdl.createByName){
                this.$set(this.mdl,"createByName",this.user.fullName);
            }
            return CustomPageColumnApi.save(this.mdl);
        },
        getPageTemplate(){
            debugger
            var self=this;
            Util.open({
                component:CustomPageTemplateDialog,
                curVm:this,
                title:self.i18n('form.customPageTemplate','自定义页面模板'),
                max:true
            },function (action,data){
                if(action!="ok") return;
                self.$confirm({
                    title: self.$ti18('rxMsa.actionTips','操作提示'),
                    zIndex: 20000,
                    content: self.i18n('form.overwriteColumn','您确定要覆盖当前的栏目吗'),
                    okText: self.$ti18('rxForm.ackBtn','确认'),
                    cancelText: self.$ti18('rxForm.cancelBtn','取消'),
                    onOk() {
                        self.$refs.pageDesign.setData({
                            template:data.template,
                            mobileTemplate:data.mobileTemplate,
                            jsScript:data.javascript,
                            cssStyle:data.cssStyle,
                        })
                        self.onChange();
                    },
                    onCancel() {
                    }
                })
            });
        },
        saveTemplate(){
            if(!this.mdl.name){
                this.$message.error(this.i18n('form.nameCannotBeEmpty',"名称不能为空!"));
                return;
            }else if(!this.mdl.alias){
                this.$message.error(this.i18n('form.aliasPageTemplate',"别名不能为空!"));
                return;
            }
            var obj = this.$refs.pageDesign.getData();
            var templatObj={
                alias:this.mdl.alias,
                name:this.mdl.name,
                template:obj.template,
                mobileTemplate:obj.mobileTemplate,
                javascript:obj.jsScript,
                cssStyle:obj.cssStyle,
                isDefault:"1",
                createByName:this.user.fullName,
            }
            CustomPageTemplateApi.save(templatObj).then(res =>{
            });
        },
        //实时渲染
        changePage(viewConfig){
            if(viewConfig){
                this.$refs.customPageShow.loadView(viewConfig);
            }
        },
        onChange(){
            this.$refs.pageDesign.onChange();
        },
        setType(type){
            this.type=type;
        }
    },
}
</script>
<style scoped>
.CustomPageTemplateEdit-common-left{
    position: relative;
}

.userHeadPortrait-upload-url{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.userHeadPortrait-upload-url:hover .userHeadPortrait-upload-delete{
    display: block;
}
.userHeadPortrait-upload-delete{
    color: red;
    font-size: 18px;
    cursor: pointer;
    margin-left: 5px;
    display: none;
}
.userHeadPortrait-upload{
    display: flex;
}
.userHeadPortrait-upload >>>.ant-upload-list{
    display: none;
}
.userHeadPortrait{
    height: 26px;
    margin: 0px 10px 0px 16px;
    border-radius: 5px;
}
.CustomPageTemplateEdit-head-modle{
    display: flex;
}
.CustomPageTemplateEdit-common{
    height:calc(100% - 50px);
    width: 100%;
    display: flex;
}
.CustomPageTemplateEdit-head-modle >>> .ant-form-item{
    margin-right: 30px!important;
}
.CustomPageTemplateEdit-common>div:nth-child(1){
    flex: 1;
    border: 1px solid #dadde0;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
}
.CustomPageTemplateEdit-common-right{
    flex: 1;
    flex-direction: column;
    border: 1px solid #dadde0;
    overflow: auto;
}

</style>
